<template>
  <el-dialog
    :model-value="detailDialogVisible"
    :title="dialogTitle"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      :model="form"
      label-width="auto"
      :rules="rules"
      ref="ruleFormRef"
      style="max-width: 600px"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" disabled />
      </el-form-item>
      <el-form-item label="密码 " prop="password">
        <el-input v-model="form.password" disabled />
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age" disabled />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" disabled />
      </el-form-item>
      <el-form-item label="删除开关" prop="isDel">
        <div class="my-4 flex items-center text-sm">
          <el-radio-group v-model="form.isDel" class="ml-4">
            <el-radio :value="0" disabled size="small">否</el-radio>
            <el-radio :value="1" disabled size="small">是</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, watch } from "vue";

const emits = defineEmits(["update:modelValue", "initGetUserList"]);

const props = defineProps({
  dialogTitle: {
    type: String,
    default: "",
  },
  rowvalue: {
    tyep: Object,
    default: () => {},
  },
});

// do not use same name with ref
const form = ref({
  name: "",
  password: "",
  age: null,
  address: "",
  isDel: null,
});

// 处理关闭弹窗，，配合  defineEmits 使用
const handleClose = () => {
  // 调用页面的方法，需要在父页面中传入该值 配置 @initGetUserList 才能使用
  //   emits("initGetUserList");
  emits("update:modelValue", false);
};

watch(
  () => props.rowvalue,
  () => {
    form.value = props.rowvalue;
  },
  { deep: true, immediate: true }
);
</script>
